<template>
<view class="container">
	
	<uni-nav-bar title="我的足迹" left-icon="back"  fixed="true" color="#353535" backgroundColor="#fff" @clickLeft="goback"></uni-nav-bar>
	<view class="footprint">
		<view v-for="(item, index) in footprintList" :key="index" class="day-item">
		<view class="day-hd">{{item.updateTime}}</view>
		<view class="day-list">
			<view v-for="(iitem, index2) in item.productList" :key="index2" class="item" @touchend="touchEnd" @tap="goDetail" :data-footprint="iitem.footprint" @touchstart="touchStart">
			<image class="img" :src="iitem.product.pic"></image>
			<view class="info">
				<view class="name">{{iitem.product.name}}</view>
            <!-- <image src="/static/static/images/delete.png" @tap.stop="delete" :data-id="iitem.footprint.id" class="delete"></image> -->
				<image src="/static/static/images/delete.png" :data-id="iitem.footprint.id" class="delete"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
</template>

<script>
var util = require("../../../utils/util.js");
var api = require("../../../config/api.js");
var app = getApp();
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"

export default {
  data() {
    return {
      footprintList: [],
      touch_start: "",
      touch_end: ""
    };
  },

  components: {uniNavBar},
  props: {},
  onShareAppMessage: function (res) {
    return {
      title: '琅琊严选',
      path: '/pages/index/index'
    };
  },
  onLoad: function (options) {},
  onReady: function () {},
  onShow: function () {
    this.getFootprintList();
  },
  onHide: function () {// 页面隐藏
  },
  onUnload: function () {// 页面关闭
  },
  methods: {
	  goback:function(){
		  uni.navigateBack()
	  },
    getFootprintList() {
      let that = this;
      util.request(api.FootprintList).then(function (res) {
        if (res.errno == 0) {
          console.log(res.data);
          that.setData({
            footprintList: res.data.records
          });
        }
      });
    },

    goDetail(event) {
      console.log(JSON.stringify(event));
      let that = this;
      let footprint = event.currentTarget.dataset.footprint;
      var touchTime = that.touch_end - that.touch_start;
      console.log(touchTime);
      console.log(footprint); // 如果按下时间大于350为长按  

      if (touchTime > 350) {
        uni.showModal({
          title: '',
          content: '要删除所选足迹？',
          success: function (res) {
            if (res.confirm) {
              util.request(api.FootprintDelete, {
                id: footprint.id
              }, 'GET').then(function (res) {
                if (res.errno == 0) {
                  uni.showToast({
                    title: '删除成功',
                    icon: 'success',
                    duration: 2000
                  });
                  that.getFootprintList();
                }
              });
              console.log('用户点击确定');
            }
          }
        });
      } else {
        uni.navigateTo({
          url: '/pages/goods/goods?id=' + footprint.productId
        });
      }
    },

    //按下事件开始  
    touchStart: function (e) {
      let that = this;
      that.setData({
        touch_start: e.timeStamp
      });
      console.log(e.timeStamp + '- touch-start');
    },
    //按下事件结束  
    touchEnd: function (e) {
      let that = this;
      that.setData({
        touch_end: e.timeStamp
      });
      console.log(e.timeStamp + '- touch-end');
    },
    deleteFun: function (e) {
      console.log(JSON.stringify(e));
      var that = this;
      util.request(api.FootprintDelete, {
        id: e.currentTarget.dataset.id
      }, 'GET').then(function (res) {
        if (res.errno == 0) {
          uni.showToast({
            title: '删除成功',
            icon: 'success',
            duration: 2000
          });
          that.getFootprintList();
        }
      });
    }
  }
};
</script>
<style>
page{
  background: #f4f4f4;
  min-height: 100%;
}

.container{
  background: #f1f1f1;
  min-height: 100%;
}

.footprint{
  margin-top: 30rpx;
  height: auto;
  overflow: hidden;
  width: 100%;
  background: #f1f1f1;
  padding-left: 30rpx;
}

.day-item{
  height: auto;
  overflow: hidden;
  width: 100%;
  margin-bottom: 20rpx;
}

.day-hd{
  height: 94rpx;
  width: 100%;
  line-height: 94rpx;
  background: #f1f1f1;
  padding-left: 30rpx;
  color: #888888;
  font-size: 24rpx;
}

.day-list{
  width: 100%;
  height: auto;
  overflow: hidden;
  background: #f1f1f1;
  /* display: flex; */
}

.item{
  height: auto;
  width: 50%;
  background: #f1f1f1;
  /* display: flex; */
  flex-direction: column;
  align-items: center;
  padding-right: 28rpx;
  float: left;
}

.item:last-child{
  border-bottom: 1px solid #f1f1f1;
}

.item .img{
  width: 330rpx;
  height: 330rpx;
}

.item .info{
  width: 100%;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.item .info .name{
  font-size: 26rpx;
  color: #353535;
  line-height: 28rpx;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item .info .delete{
  width: 30rpx;
  height: 30rpx;
}

.item .info .subtitle{
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #888;
  line-height: 40rpx;
}

.item .info .price{
  margin-top: 8rpx;
  font-size: 28rpx;
  color: #333;
  line-height: 40rpx;
}

</style>